<template>
  <el-input
    v-model="showMoney"
    @blur="inputMoney"
    @focus="focus()"
    @pressEnter="inputMoney"
  ></el-input>
</template>
<script>
import getInputValue from "@/common/js/money";
export default {
  data() {
    return {
      money: this.value,
      showMoney: getInputValue(this.value),
    };
  },

  props: {
    value: {
      // 数字框默认值
      type: Number | null,
      default: "0",
    },
  },
  model: {
    prop: "value",
    //这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
    event: "input",
  },
  methods: {
    inputMoney(el) {
      let number = el.target.value;
      this.money = number;
      this.showMoney = getInputValue(number);
      this.$emit("input", number);
    },
    focus() {
      this.showMoney = this.money;
    },
  },
  watch: {
    value(newVal) {
      this, (money = newVal);
      this.showMoney = getInputValue(newVal);
    },
  },
};
</script>